
<template>
  <a-drawer
    title="字段管理"
    :maskClosable="false"
    :visible="visible"
    :width="520"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-row type="flex" justify="end">
      <a-button type="primary" @click="handleEdit()">
        添加
      </a-button>
    </a-row>
    <a-table
      class="mt-10"
      :dataSource="dataList"
      :columns="columns"
      :loading="tableLoading"
      :pagination="false"
      rowKey="id"
      :scroll="{ x: 'max-content' }"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click="handleEdit(record)">
              编辑
            </a-button>
            <a-popconfirm
              title="确认要删除该字段吗?"
              @confirm="handleDelete(record)"
            >
              <a-button type="link" danger>
                删除
              </a-button>
            </a-popconfirm>

          </a-space>
        </template>
      </template>
    </a-table>
    <div class="drawer-footer">
      <a-button type="primary" @click.prevent="closeModal">确定</a-button>
    </div>


    <ExtraManageEdit
      :visible="editVisible"
      :id="editId"
      @closeModal="editVisible = false"
      @success="editSuccess"
    />
  </a-drawer>
</template>

<script>
import {computed, defineComponent, watch, ref, reactive, toRaw, toRefs} from "vue";
import _ from "lodash";
import ExtraManageEdit from "@/views/contract/NewContract/modules/ExtraManageEdit.vue";
import request from "@/common/utils/request";
import {message} from "ant-design-vue";

export default defineComponent({
  name: "extraManage",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: { ExtraManageEdit },
  setup(props, {emit}) {
    const state = reactive({
      dataList: [],
      tableLoading: false,
      editVisible: false,
      editId: 0,
    });
    const closeModal = () => {
      emit("closeModal");
    };

    const handleEdit = (record) => {
      state.editId = record?.id || 0;
      state.editVisible = true;
    };

    const init = () => {
      state.tableLoading = true;
      request.get("/org", "/org/contract/extra/field").then((res) => {
        state.tableLoading = false;
        state.dataList = res?.list || [];
      }).catch(() => {
        state.dataList = [];
        state.tableLoading = false;
      })
    };

    const handleDelete = (record) => {
      request.del("/org", `/org/contract/extra/field/${record.id}`).then((res) => {
        message.success(res?.msg || '删除成功');
        init();
      })
    };

    const editSuccess = () => {
      // 编辑成功
      init();
      state.editVisible = false;
    }
    const reset = () => {
      state.tableLoading = false;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      ...toRefs(state),
      columns,
      closeModal,
      handleDelete,
      handleEdit,
      editSuccess,
    };
  },
});

const columns = [
  {
    title: "字段名称",
    dataIndex: "fields_name",
    width: "25%",
  },
  {
    title: "排序",
    dataIndex: "sort",
    width: "25%",
  },
  {
    title: "所属项目",
    dataIndex: "village_name",
    width: "25%",
    customRender: ({ text }) => {
      return text || '通用';
    },
  },
  {
    title: "操作",
    dataIndex: "id",
    key: 'action',
    width: "25%",
  },
]
</script>
<style lang="less" scoped>

</style>
